<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="4000" indicator-color="white">
      <van-swipe-item
        v-for="item in list"
        :key="item.cate_id"
        :style="`background-image: url(${item.img})`"
        ><router-link :to="`/CateDetail/cate?cata_id=${item.cate_id}`"
          >1</router-link
        >
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { getFunc } from "@/http/request.js";

export default {
  name: "Slideshow",
  data() {
    return {
      list: [],
      isShow: true,
    };
  },
  components: {},
  methods: {
    async initList() {
      // 请求商品列表
      await getFunc("/cate/list").then((data) => {
        if (data.code == 200) {
          this.list = data.result;
          this.list = this.list
            .sort((a, b) => {
              return Math.random() > 0.5 ? -1 : 1;
            })
            .splice(0, 5);
        }
      });
    },
  },
  mounted() {
    this.initList();
  },
};
</script>

<style lang='scss' scoped>
.my-swipe .van-swipe-item {
  font-size: 20px;
  line-height: 250px;
  text-align: center;
  background: #39a9ed no-repeat center;
  background-size: 120%;
  // background-size: contain;
  a {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: transparent;
  }
}
</style>